<template>
  <div>
    <n-modal v-model:show="modalShowVisible">
      <n-card style="width: 500px;" :title="title" :bordered="false" size="huge">
        <n-form
          :model="jobForm"
          :rules="rules"
          ref="jobFormRef"
          label-placement="left"
          :label-width="100"
        >
          <n-form-item label="岗位名称" path="jobName">
            <n-input v-model:value="jobForm.jobName"  placeholder="请输入岗位名称"/>
          </n-form-item>
          <n-form-item label="部门" path="deptId">
            <n-tree-select :options="treeData" v-model:value="jobForm.deptId"/>
          </n-form-item>
          <n-form-item label="排序" path="sort">
            <n-input-number v-model:value="jobForm.sort" clearable />
          </n-form-item>
          <n-form-item label="备注" path="remark">
            <n-input
              placeholder="备注"
              v-model:value="jobForm.remark"
              type="textarea"
              :autosize="{minRows: 3,maxRows: 5}"/>
          </n-form-item>
        </n-form>
        <template #footer>
          <div style="display: flex; justify-content: flex-end;">
            <n-space>
              <n-button type="primary" :loading="submitLoading" @click="submitForm">提交</n-button>
              <n-button @click="handleResetForm">关闭</n-button>
            </n-space>
          </div>
        </template>
      </n-card>
    </n-modal>
  </div>
</template>

<script lang="ts">
import {defineComponent,ref,onMounted} from 'vue'
import {getDeptTreeData} from "@/api/system/dept";
import {saveJob,updateJob} from "@/api/system/job";
import {useMessage} from 'naive-ui'
export default defineComponent({
  name: "JobForm",
  setup(props,context){
    let modalShowVisible=ref(false);
    let jobForm=ref({});
    let treeData=ref([]);
    let submitLoading=ref(false);
    let jobFormRef=ref(null);
    const message=useMessage();
    const title=ref('');
    const rules={
      jobName:{required:true,message:'请输入岗位名称',trigger:'blur'},
      deptId:{required:true,message:'请选择部门',trigger:['blur','change']},
      sort:{type:'number',required:true,message:'请输入排序值',trigger:['blur','change']},
    }
    function submitForm(){
      jobFormRef.value.validate((errors:Boolean)=>{
         if(!errors){
            let obj;
            if(jobForm.value.id!=null&&typeof(jobForm.value.id)!='undefined'){
               obj=updateJob(jobForm.value);
            }else{
              obj=saveJob(jobForm.value);
            }
            obj.then(res=>{
              if(res){
                 message.success('操作成功')
                 context.emit('success');
                 handleResetForm();
              }
            })
         }else{
           message.error('验证失败')
         }
      })
    }
    function handleResetForm(){
      Object.keys(jobForm.value).forEach((key)=>{
        jobForm.value[key]=null;
      })
      modalShowVisible.value=false;
    }
    function loadDeptData(){
      getDeptTreeData().then(data=>{
        treeData.value=data;
      })
    }
    return {
      modalShowVisible,
      rules,
      jobForm,
      jobFormRef,
      treeData,
      submitLoading,
      title,
      submitForm,
      handleResetForm,
      loadDeptData
    }
  }
})
</script>

<style scoped>

</style>
